// 引入react
import * as React from 'react';
import {StyleSheet, View, Text, ScrollView, TouchableOpacity} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import AllStyle from '../../../../style';
import {HeaderTitle} from '../../../../componet/settingComponent/HeaderTitle';
import {TabItem} from '../../../../componet/settingComponent/TabItem';
import {CardItem} from '../../../../componet/settingComponent/CardItem';
import {getDate} from '../../../../utils/DateUtils';
import {getTeamMonthSignRecord} from '../../../../api/empActual';
import {BrLine} from '../../../../componet/settingComponent/BrLine';
import {Loading} from '../../../../utils/Loading';
import {Toast} from '../../../../utils/Toast';

/**
 * @Description:
 * @author TangYong
 * @date 2023/2/10
 */
export class MonthStatistics extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dAndMVal: this.props.route.params.dAndMVal,
            TeamMonthStatisticsData: {
                beLateDataList: [],
                earlyDataList: [],
                lackDataList: [],
                absenteeismDataList: [],
            },
        };
    }

    //生命周期：组件挂载后
    componentDidMount() {
        this.getMonthData();
    }

    //方法
    back = () => {
        this.props.navigation.goBack();
    };
    changedAndMVal = (val) => {
        this.setState({dAndMVal: val});
    };
    goto = (name, params) => {
        console.log(name);

        const route = {
            name: name,
            params: {
                //routePathName: this.props.route.name,
                ...params,
            },

        };
        this.props.navigation.navigate(route);
    };
    getMonthData() {

        let pr = {};
        pr.expectSignDate = getDate(new Date(), 'yyyy-MM-dd').toString() + ' 00:00:00';
        Loading.show()
        getTeamMonthSignRecord(pr).then(
            res => {
                Loading.hidden()
                let data = res.data;
                this.setState({TeamMonthStatisticsData: data});
                //console.log("TeamMonthStatisticsData",data)
            },
        ).catch(err => {
            Loading.hidden();
            Toast.showWarning(err.toString())
        }).finally(()=>{
            Loading.hidden();
        });
    }

    //DOM
    render() {
        return (
            <SafeAreaView edges={['top', 'left', 'right', 'bottom']} style={{flex: 1, backgroundColor: '#FFF'}}>
                <View style={AllStyle.container}>
                    <HeaderTitle goBack={() => {
                        this.back();
                    }} headtitle={'月统计'}
                    />
                    <ScrollView style={AllStyle.padding15}>
                        <View style={AllStyle.card}>
                            <View style={style.card_top}>
                                <View style={style.top_l}>
                                    <Text style={{fontSize: 16, fontWeight: '500'}}>上班情况统计</Text>
                                </View>
                                <View style={style.top_r}>
                                    <View style={style.r_container}>
                                        <TouchableOpacity onPress={() => {
                                            this.changedAndMVal(4);
                                        }}>
                                            <View
                                                style={[style.top_r_btnW, this.state.dAndMVal == 4 && {backgroundColor: '#fff'}]}>
                                                <Text>迟到</Text>
                                            </View>
                                        </TouchableOpacity>
                                        <TouchableOpacity onPress={() => {
                                            this.changedAndMVal(5);
                                        }}>
                                            <View
                                                style={[style.top_r_btnW, this.state.dAndMVal == 5 && {backgroundColor: '#fff'}]}>
                                                <Text>早退</Text>
                                            </View>
                                        </TouchableOpacity>
                                        <TouchableOpacity onPress={() => {
                                            this.changedAndMVal(3);
                                        }}>
                                            <View
                                                style={[style.top_r_btnW, this.state.dAndMVal == 3 && {backgroundColor: '#fff'}]}>
                                                <Text>缺卡</Text>
                                            </View>
                                        </TouchableOpacity>
                                        <TouchableOpacity onPress={() => {
                                            this.changedAndMVal(2);
                                        }}>
                                            <View
                                                style={[style.top_r_btnW, this.state.dAndMVal == 2 && {backgroundColor: '#fff'}]}>
                                                <Text>旷工</Text>
                                            </View>
                                        </TouchableOpacity>
                                    </View>

                                </View>
                            </View>
                        </View>

                        {this.state.dAndMVal == 2 && <View style={AllStyle.card}>
                            {this.state.TeamMonthStatisticsData.absenteeismDataList.map((x, index) => {
                                return <View key={index}>
                                    {index > 0 && <BrLine></BrLine>}
                                    <TouchableOpacity onPress={()=>{
                                        this.goto('userStatisticsDetails',{userId:x.user.userId,statsNum:2})
                                    }}>
                                    <CardItem title={x.user.username} value={'矿工' + x.list.length + '次'}></CardItem>
                                    </TouchableOpacity>
                                </View>;
                            })}


                            {/*<CardItem title={'唐庸'} value={'矿工4次'}></CardItem>*/}
                        </View>}

                        {this.state.dAndMVal == 4 && <View style={AllStyle.card}>
                            {this.state.TeamMonthStatisticsData.beLateDataList.map((x, index) => {
                                return <View key={index}>
                                    {index > 0 && <BrLine></BrLine>}
                                    <TouchableOpacity onPress={()=>{
                                        this.goto('userStatisticsDetails',{userId:x.user.userId,statsNum:4})
                                    }}>
                                        <CardItem title={x.user.username} value={'迟到' + x.list.length + '次'}></CardItem>
                                    </TouchableOpacity>

                                </View>;
                            })}


                            {/*<CardItem title={'唐庸'} value={'矿工4次'}></CardItem>*/}
                        </View>}

                        {this.state.dAndMVal == 5 && <View style={AllStyle.card}>
                            {this.state.TeamMonthStatisticsData.earlyDataList.map((x, index) => {
                                return <View key={index}>
                                    {index > 0 && <BrLine></BrLine>}
                                    <TouchableOpacity onPress={()=>{
                                        this.goto('userStatisticsDetails',{userId:x.user.userId,statsNum:5,})
                                    }}>
                                    <CardItem title={x.user.username} value={'早退' + x.list.length + '次'}></CardItem>
                                    </TouchableOpacity>
                                </View>;
                            })}


                            {/*<CardItem title={'唐庸'} value={'矿工4次'}></CardItem>*/}
                        </View>}

                        {this.state.dAndMVal == 3 && <View style={AllStyle.card}>
                            {this.state.TeamMonthStatisticsData.lackDataList.map((x, index) => {
                                return <View key={index}>
                                    {index > 0 && <BrLine></BrLine>}
                                    <TouchableOpacity onPress={()=>{
                                        this.goto('userStatisticsDetails',{userId:x.user.userId,statsNum:3,})
                                    }}>
                                    <CardItem title={x.user.username} value={'缺卡' + x.list.length + '次'}></CardItem>
                                    </TouchableOpacity>
                                </View>;
                            })}


                            {/*<CardItem title={'唐庸'} value={'矿工4次'}></CardItem>*/}
                        </View>}

                    </ScrollView>
                </View>
            </SafeAreaView>
        );
    }

}

const style = StyleSheet.create({
    //样式
    card_top: {
        marginTop: 15,
        marginBottom: 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    top_l: {
        // backgroundColor:'red',
        justifyContent: 'center',
    },
    top_r: {
        //backgroundColor:'red',
        // width: (width - 60) / 2,
        justifyContent: 'center',
        alignItems: 'flex-end',
    },
    r_container: {
        backgroundColor: '#DCDFE6',
        flexDirection: 'row',
        padding: 2,
        borderRadius: 5,
    },
    top_r_btnW: {
        // width: 40,
        padding: 5,
        paddingLeft: 8,
        paddingRight: 8,
        height: 30,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,

    },
});

